<script setup lang="ts">
import router from "@/router";
import { ref } from "vue";

const isExplainShow = ref<boolean>(true);
const isStartupShow = ref<boolean>(true);
const startupBtnShow = ref<boolean>(false);
const isDirectoryShow = ref<boolean>(false);
const startupVideo = ref<HTMLVideoElement>();
const directoryVideo = ref<HTMLVideoElement>();
function playStartupVideo() {
	isExplainShow.value = false;
	startupVideo.value?.play();
}
function playDirectoryVideo() {
  isStartupShow.value = false;
  isDirectoryShow.value = true;
	directoryVideo.value?.play();
}
function goPage(name: string) {
	// store.commit("playClickSound");
	// store.commit("pauseBgm");
	switch (name) {
		case "directory":
			// store.commit("updateCurrentChapter", "1");
			// setTimeout(() => store.commit("playBgm"), 500);
			break;

		case "wei":
			// store.commit("updateCurrentChapter", "2");
			// console.log("store.state.currentChapter :>> ", store.state.currentChapter);
			// setTimeout(() => store.commit("playBgm"), 500);
			break;

		case "people":
			// store.commit("updateCurrentChapter", "3");
			// setTimeout(() => store.commit("playBgm"), 500);
			break;

		case "life":
			// store.commit("updateCurrentChapter", "4");
			// setTimeout(() => store.commit("playBgm"), 500);
			break;

		default:
			break;
	}
	// router.push("/" + name);
  console.log('name :>> ', name);
  router.push("/" + name);
}
</script>

<template>
	<transition
		name="fade"
		appear
	>
		<div
			class="explain-wrap"
			v-show="isExplainShow"
		>
			<div class="content">
				<img
					src="@/assets/img/start-txt.png"
					alt=""
					class="txt"
				/>
				<img
					src="@/assets/img/enter-btn.png"
					class="btn"
					@click="playStartupVideo"
				/>
			</div>
			<img
				src="//qiniu.charmofjiangsu.com//start-bg.png"
				alt=""
				class="bg"
			/>
		</div>
	</transition>

	<transition
		name="fade"
		appear
	>
		<div
			class="startup-wrap"
			v-show="isStartupShow"
		>
			<transition name="fade">
				<div
					class="start-toast"
					v-show="startupBtnShow"
				>
					<div class="content">
						<img
							src="../assets/img/start-title.png"
							alt=""
							class="txt"
						/>
						<img
							src="../assets/img/start-btn.png"
							alt=""
							class="btn"
							@click="playDirectoryVideo"
						/>
					</div>
					<img
						src="../assets/img/start-bg.png"
						alt=""
						class="bg"
					/>
				</div>
			</transition>

			<video
				ref="startupVideo"
				webkit-playsinline
				playsinline
				x5-playsinline
				preload="auto"
				@ended="startupBtnShow = true"
				src="//qiniu.charmofjiangsu.com//startup.mp4?v=3"
				id="startupVideo"
				poster="//qiniu.charmofjiangsu.com//startup.mp4?vframe/jpg/offset/0"
			></video>
		</div>
	</transition>

	<div
		class="directory-wrap"
		v-show="isDirectoryShow"
	>
		<div class="list">
			<div
				class="item item1"
				@click="goPage('directory')"
			></div>
			<div
				class="item item2"
				@click="goPage('wei')"
			></div>
			<div
				class="item item3"
				@click="goPage('people')"
			></div>
			<div
				class="item item4"
				@click="goPage('life')"
			></div>
		</div>
		<div class="bg">
			<video
        ref="directoryVideo"
				muted
				webkit-playsinline
				playsinline
				x5-playsinline
				poster="//qiniu.charmofjiangsu.com//directory3.mp4?vframe/jpg/offset/1"
				preload="metadata"
				loop
				id="directoryVideo"
				src="//qiniu.charmofjiangsu.com//directory3.mp4?v2"
			></video>
		</div>
	</div>
</template>

<style scoped lang="less">
.explain-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 1.5625vw;
	z-index: 1000;

	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 50;

		.txt {
			display: block;
			width: 42.9166vw;
			margin-bottom: 1.5625vw;
		}

		.btn {
			display: block;
			width: 20.8333vw;
			margin: 0 auto;
		}
	}

	.bg {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
}

.startup-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;

	video {
		width: 100%;
		height: 100%;
		object-fit: fill;
	}
}

.directory-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	.list {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1000;

		.item {
			position: absolute;
			width: 14.5833vw;
			height: 10.4166vw;
			// background: rgba($color: #000000, $alpha: .5);

			&.item1 {
				left: 20.8333vw;
				bottom: 13.0208vw;
			}

			&.item2 {
				left: 43.75vw;
				top: 14.5833vw;
			}

			&.item3 {
				right: 30.7291vw;
				bottom: 13.0208vw;
			}

			&.item4 {
				top: 14.5833vw;
				right: 10.9375vw;
			}
		}
	}

	.bg {
		width: 100%;
		height: 100%;
		background: url("//qiniu.charmofjiangsu.com//directory2.mp4?vframe/jpg/offset/1") no-repeat;
		background-size: 100% 100%;

		video {
			width: 100%;
			height: 100%;
			object-fit: fill;
		}
	}
}

.start-toast {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translateZ(10px);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 1.5625vw;
	z-index: 500;

	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.txt {
			display: block;
			width: 30.1041vw;
			margin-bottom: 1.3541vw;
		}

		.btn {
			display: block;
			width: 20.8333vw;
			margin: 0 auto;
		}
	}

	.bg {
		display: block;
		width: 100%;
		height: 100%;
	}
}
</style>
